
<template>
  <div>

    <div v-if="TransportListVisible">
      <div  style="background-color: #f1f2f5; width: 100%; height: 1000px;">

        <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>
        <!--  带条件查询-->
        <div style="background-color: #fdfdfd; width: 1200px; height: 270px; margin: 0 auto;">
          <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
            <el-row style=" margin-top: 30px;">
              <span style="margin-right: 35px;">运单编号：</span>
              <el-input v-model="TransportDto.id" placeholder="请输入运单编号" :style="{ width: '200px', marginRight: '20px' }"></el-input>
              <span style="margin-left: 40px; margin-right: 40px;">运单状态：</span>
              <el-select v-model="TransportDto.status" placeholder="请选择" :style="{ width: '200px', marginRight: '20px' }">
                <el-option v-for="item in TransportStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
              <span style="margin-left: 35px; margin-right: 40px;">调度状态：</span>
              <el-select v-model="TransportDto.schedulingStatus" placeholder="请选择" :style="{ width: '250px' }">
                <el-option v-for="item in SchedulingStatus" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-row>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
            <el-row>
              <span style="margin-right: 20px;">发件人姓名：</span>
              <el-input v-model="TransportDto.senderName" placeholder="请输入发件人姓名" :style="{ width: '200px', marginRight: '20px' }"></el-input>
              <span style="margin-left: 40px; margin-right: 20px;">发件人电话：</span>
              <el-input v-model="TransportDto.senderPhone" placeholder="请输入发件人电话" :style="{ width: '200px', marginRight: '20px' }"></el-input>
              <span style="margin-left: 40px; margin-right: 20px;">发件人地址：</span>
              <el-select v-model="TransportDto.senderProvinceId" placeholder="请选择省份" clearable @change="handleSenderProvinceChange" :style="{ width: '70px', marginRight: '20px' }">
                <el-option v-for="province in senderprovinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
              </el-select>
              <el-select v-model="TransportDto.senderCityId" placeholder="请选择城市" clearable @change="handleSenderCityChange" :style="{ width: '70px', marginRight: '20px' }">
                <el-option v-for="city in sendercities" :key="city.id" :label="city.name" :value="city.id"></el-option>
              </el-select>
              <el-select v-model="TransportDto.senderDistrictId" placeholder="请选择区域" clearable :style="{ width: '70px' }">
                <el-option v-for="district in senderdistricts" :key="district.id" :label="district.name" :value="district.id"></el-option>
              </el-select>
            </el-row>
          </div>
          <div style="display: flex; align-items: center; margin-bottom: 20px;justify-content: center;">
            <el-row>
              <span style="margin-right: 20px;">收件人姓名：</span>
              <el-input v-model="TransportDto.receiverName" placeholder="请输入收件人姓名" :style="{ width: '200px' , marginRight: '20px'}"></el-input>
              <span style="margin-left: 40px; margin-right: 20px;">收件人电话：</span>
              <el-input v-model="TransportDto.receiverPhone" placeholder="请输入收件人电话" :style="{ width: '200px' , marginRight: '20px'}"></el-input>
              <span style="margin-left: 40px; margin-right: 20px;">收件人地址：</span>
              <el-select v-model="TransportDto.receiverProvinceId" placeholder="请选择省份" clearable @change="handleReceiverProvinceChange" :style="{ width: '70px', marginRight: '20px' }">
                <el-option v-for="province in receiverprovinces" :key="province.id" :label="province.name" :value="province.id"></el-option>
              </el-select>
              <el-select v-model="TransportDto.receiverCityId" placeholder="请选择城市" clearable @change="handleReceiverCityChange" :style="{ width: '70px', marginRight: '20px' }">
                <el-option v-for="city in receivercities" :key="city.id" :label="city.name" :value="city.id"></el-option>
              </el-select>
              <el-select v-model="TransportDto.receiverDistrictId" placeholder="请选择区域" clearable :style="{ width: '70px' }">
                <el-option v-for="district in receiverdistricts" :key="district.id" :label="district.name" :value="district.id"></el-option>
              </el-select>
            </el-row>
          </div>

          <div style="margin-left: 30px">
            <el-button style="margin-right: 20px; background-color: #df5536; width: 90px; color: white;" @click="ConditionalSearch" >搜索</el-button>
            <el-button style="width: 90px;">重置</el-button>
          </div>

        </div>

        <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>

        <!--运单表格-->
        <div style="background-color: #fdfdfd; width: 1200px; height: 700px; margin-left: auto; margin-right: auto;">
          <!--表格-->
          <el-table
            :data="TransportList.slice((currentPage-1)*pageSize,currentPage*pageSize)"
            stripe
            height="620"
            style="width: 100%; display: inline-block; text-align: left;">
            <el-table-column
              prop="id"
              label="运单编号"
              width="180">
            </el-table-column>

            <el-table-column
              prop="status"
              label="运单状态"
              width="180">
              <template v-slot="{ row }">
                {{ ConvertWaybillStatus(row.status) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="scheduling_status"
              label="调度状态"
              width="180">
              <template v-slot="{ row }">
                {{ TransitionSchedulingStatus(row.scheduling_status) }}
              </template>
            </el-table-column>

            <el-table-column
              prop="order_id"
              label="订单编号"
              width="180">
            </el-table-column>

            <el-table-column
              prop="orderVo.createTime"
              label="下单时间"
              width="180">
            </el-table-column>

            <el-table-column
              prop="orderVo.senderName"
              label="发件人姓名"
              width="180">
            </el-table-column>

            <el-table-column
              prop="orderVo.senderPhone"
              label="发件人电话"
              width="180">
            </el-table-column>

            <el-table-column
              prop="orderVo.senderAddress"
              label="发件人详细地址"
              width="400">
            </el-table-column>

            <el-table-column
              prop="orderVo.receiverName"
              label="收件人姓名"
              width="180">
            </el-table-column>

            <el-table-column
              prop="orderVo.receiverPhone"
              label="收件人电话"
              width="180">
            </el-table-column>
            <el-table-column
              prop="orderVo.receiverAddress"
              label="收件人详细地址"
              width="400">
            </el-table-column>

            <el-table-column
              fixed="right"
              label="操作"
              width="100">
              <template v-slot="scope">

                <el-button type="text" size="small" @click="handleDetailClick(scope.row.id)" >查看详情</el-button>

              </template>
            </el-table-column>

          </el-table>
          <!--分页-->
          <div class="block" style="margin: 0 auto; text-align: center;">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 30]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="TransportList.length">
            </el-pagination>
          </div>

        </div>

      </div>
    </div>


    <div v-if="!TransportListVisible">
      <div  style="background-color: #f1f2f5; width: 100%; height: 1250px;">

        <div style="background-color: #f1f2f5; width: 100%; height: 30px;"></div>

        <div style="background-color: #fdfdfd; width: 1200px; height: 110px; margin: 0 auto;">

          <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
            <el-row style=" margin-top: 20px;">

              <span style=" font-size: 14px; margin-right: 15px;">订单编号：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.order_id }}</span>

              <span style=" font-size: 14px; margin-right: 15px;">运单编号：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.id }}</span>

              <span style=" font-size: 14px; margin-right: 15px;">下单时间：</span>
              <span style=" font-size: 14px;  width: 200px; color: #bbbbbb; margin-right: 300px;">{{ TransportVo.orderVo.createTime }}</span>

            </el-row>
          </div>

          <div style="display: flex; align-items: center; margin-bottom: 10px;justify-content: center;">
            <el-row style=" margin-top: 10px;">
              <span style=" font-size: 14px; margin-right: 15px;">订单状态：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 305px; color: #bbbbbb">{{ TransportVo.orderVo.status | ConvertOrderStatus }}</span>

              <span style=" font-size: 14px; margin-right: 15px;">预计到达时间：</span>
              <span style=" font-size: 14px;  width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.estimatedArrivalTime }}</span>

              <span style="padding-right: 210px;">&nbsp;</span>
            </el-row>
          </div>

        </div>

        <div style="background-color: #f1f2f5; width: 100%; height: 10px;"></div>

        <el-collapse v-model="activeNames" @change="handleChange" style="overflow: auto;">
          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto; text-align: left;">
            <el-collapse-item name="1">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">基本信息</span>
              </template>
              <div style=" margin-top: 20px;">
                <span style="margin-left: 50px; font-size: 14px;">发货方</span>
                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方姓名：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.senderName }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 90px;">发货方地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 150px; color: #bbbbbb">{{ TransportVo.orderVo.senderProvinceName }} {{ TransportVo.orderVo.senderCityName }} {{ TransportVo.orderVo.senderCountyName }}</span>


                </el-row>

                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">发货方电话：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.senderPhone }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.senderAddress }}</span>


                </el-row>
              </div>

              <div style=" margin-top: 20px;">
                <span style="margin-left: 50px; font-size: 14px;">收货方</span>
                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方姓名：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverName }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 110px;">收货方地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverProvinceName }} {{ TransportVo.orderVo.receiverCityName }} {{ TransportVo.orderVo.receiverCountyName }}</span>


                </el-row>

                <el-row style=" margin-top: 10px;">

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">收货方电话：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverPhone }}</span>

                  <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">详细地址：</span>
                  <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.receiverAddress }}</span>


                </el-row>
              </div>

              <div style=" margin-top: 20px;">
                <span style="margin-left: 50px; font-size: 14px;">距离: </span>
                <span style="margin-left: 20px; font-size: 14px; ">{{ TransportVo.orderVo.distance }} km</span>

                <span style="margin-left: 100px; font-size: 14px;">地图: </span>
                <el-button style="margin-left: 20px;" type="text" @click="ViewMapClickEvents">查看地图</el-button>

                <el-dialog
                  title="地图查看"
                  :visible.sync="dialogVisible"
                  width="80%"
                  :before-close="handleClose">
                  <!--                    <div style="background-color: #f1f2f5; height: 600px;"></div>-->
                  <div>
                    <div id="container"></div>
                    <div id="panel"></div>
                  </div>

                </el-dialog>
              </div>
            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="2">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">费用信息</span>
              </template>
              <div>
                <div style=" margin-top: 20px;">
                  <el-row style=" margin-top: 10px;">

                    <span style="margin-left: 50px; font-size: 14px; margin-right: 15px;">运费：</span>
                    <span style=" font-size: 16px; margin-right: 15px;width: 200px; font-weight: bold; color: #ffb902">{{TransportVo.orderVo.amount}}</span>
                    <span style=" font-size: 14px; margin-right: 200px; color: #bbbbbb">元</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">支付方式：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.paymentMethod | ConvertPaymentMethods }}</span>

                    <span style=" font-size: 14px; margin-right: 15px; margin-left: 80px;">付款状态：</span>
                    <span style=" font-size: 14px; width: 200px; margin-right: 200px; color: #bbbbbb">{{ TransportVo.orderVo.paymentStatus | ConvertPaymentStatus}}</span>
                  </el-row>

                </div>


              </div>

            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="3">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">货品信息</span>
              </template>
              <div style="margin-left: 50px; width: 1100px; display: inline-block; text-align: left;">
                <el-table
                  :data="CargoList"
                  height="200"
                  stripe
                  style="width: 100%;">
                  <el-table-column
                    prop="name"
                    label="货物名称"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="quantity"
                    label="货品数量"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="goodsTypeId"
                    label="货物类型ID"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="weight"
                    label="货品重量"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="volume"
                    label="货品体积"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="totalWeight"
                    label="货品总重量"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="totalVolume"
                    label="货品总体积"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="cargoBarcode"
                    label="货品条码"
                    width="180">
                  </el-table-column>
                  <el-table-column
                    prop="remark"
                    label="货品备注"
                    width="180">
                  </el-table-column>
                </el-table>
              </div>
            </el-collapse-item>
          </div>

          <div style="margin: 10px; padding: 10px; width: 1200px; margin-left: auto; margin-right: auto;">
            <el-collapse-item name="4">
              <template slot="title">
                <span style="font-weight: bold; font-size: 16px; margin-left: 30px;">取件信息</span>
              </template>
              <div>
                <div style=" margin-top: 20px;">
                  <el-row style="margin-left: 50px; margin-top: 10px;">

                    <span style=" font-size: 14px;">所在网点：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">新惠镇网点</span>


                    <span style=" font-size: 14px; margin-left: 30px;">取件类型：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">预结</span>

                    <span style=" font-size: 14px;margin-left: 30px;">作业状态：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 100px; color: #bbbbbb">未付款</span>

                    <span style=" font-size: 14px;margin-left: 30px;">取件快递员：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 230px; color: #bbbbbb">未付款</span>
                  </el-row>

                  <el-row style="margin-left: 50px; margin-top: 10px;">

                    <span style=" font-size: 14px;" >快递员电话：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">12000000004</span>

                    <span style=" font-size: 14px; margin-left: 30px;">预计取件时间：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">2021-12-09 18:50:57</span>

                    <span style=" font-size: 14px; margin-left: 30px;">取件完成时间：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">2021-12-09 18:50:57</span>

                    <span style=" font-size: 14px;margin-left: 30px;">实际取件时间：</span>
                    <span style=" font-size: 14px; width: 150px; margin-right: 30px; color: #bbbbbb">2021-12-09 18:50:57</span>
                  </el-row>
                </div>
              </div>

            </el-collapse-item>
          </div>
        </el-collapse>

        <el-button style="display: block; margin: 20px auto 0; width: 100px;" @click="hideDiv">返回</el-button>

      </div>
    </div>

  </div>
</template>

<script>
import {
  ObtainWaybillDetailsBasedOnId,
  QueryAllWaybillDataWithConditions,
} from "../../api/waybill/waybill";
import {handleAllProvinces, handleCityChange, handleProvinceChange} from "../../api/order/order";

// 添加高德安全密钥
window._AMapSecurityConfig = {
  securityJsCode: "e20a12abcb1fab184da9574c7eaee0b9"
};

export default {
  name: 'app',
  //name: "article-page",
  data() {
    return {
      dialogVisible: false,//查看地图弹框
      TransportDetailsVisible: false,//运单详情div
      TransportListVisible: true,//运单列表div
      activeNames: ['1', '2', '3', '4'],//运单详情信息折叠板
      pageSize: 10,//每页显示最大条数
      currentPage: 1,//当前页数
      TransportList: [],//运单信息集合
      CargoList: [],//货品信息集合
      senderprovinces: [],//发件人省份下拉框
      sendercities: [],//发件人城市下拉框
      senderdistricts: [],//发件人区县下拉框

      receiverprovinces: [],//收件人省份下拉框
      receivercities: [],//收件人城市下拉框
      receiverdistricts: [],//收件人区县下拉框

      TransportStatus: [
        {
          value: '1',
          label: '新建'
        }, {
          value: '2',
          label: '已装车'
        }, {
          value: '3',
          label: '到达'
        }, {
          value: '4',
          label: '到达终端网点'
        }, {
          value: '5',
          label: '已签收'
        }, {
          value: '6',
          label: '拒收'
        }],//运单状态下拉框
      SchedulingStatus: [
        {
          value: '1',
          label: '待调度'
        }, {
          value: '2',
          label: '未匹配路线'
        }, {
          value: '3',
          label: '已调度'
        }],//运单调度状态下拉框

      TransportDto: {//运单查询条件
        id: '',//运单id查询条件
        status : '',//运单状态查询条件
        schedulingStatus: '',//调度状态
        senderName: '',//发件人姓名查询条件
        senderPhone: '',//发件人电话查询条件
        senderProvinceId: '',//发件人省份查询条件
        senderCityId: '',//发件人城市查询条件
        senderDistrictId: '',//发件人区县查询条件
        receiverName: '',//收件人姓名查询条件
        receiverPhone: '',//收件人电话查询条件
        receiverProvinceId: '',//收件人省份查询条件
        receiverCityId: '',//收件人城市查询条件
        receiverDistrictId: '',//收件人区县查询条件
      },
      TransportVo:[]
    };
  },
  filters: {

    //转换付款方式
    ConvertPaymentMethods(value) {
      switch (value) {
        case 1:
          return '预结';
        case 2:
          return '到付';
        default:
          return '其他';
      }
    },
    //转换付款状态
    ConvertPaymentStatus(value) {
      switch (value) {
        case 1:
          return '未付';
        case 2:
          return '已付';
        default:
          return '其他';
      }
    },
    //转换订单状态
    ConvertOrderStatus(value) {
      switch (value) {
        case 1:
          return '待取件';
        case 2:
          return '已取件';
        case 3:
          return '网点自寄';
        case 4:
          return '网点入库';
        case 5:
          return '待装车';
        case 6:
          return '运输中';
        case 7:
          return '网点出库';
        case 8:
          return '待派送';
        case 9:
          return '派送中';
        case 10:
          return '签收';
        case 11:
          return '拒收';
        case 12:
          return '已取消';
        default:
          return '其他状态';
      }
    }
  },
  methods: {

    initMap() {

      console.log('initMap 方法被调用');
      if (typeof AMap === 'undefined') {
        console.error('高德地图API未加载');
        return;
      }

      const map = new AMap.Map("container", {
        resizeEnable: false,
        center: [116.397428, 39.90923],
        zoom: 13
      });

      const receiverAddress = this.TransportVo.orderVo.receiverAddress;
      const receiverCityName = this.TransportVo.orderVo.receiverCityName;

      const senderAddress = this.TransportVo.orderVo.senderAddress;
      const senderCityName = this.TransportVo.orderVo.senderCityName;

      AMap.plugin(['AMap.Driving'], function() {
        const driving = new AMap.Driving({
          map: map,
          panel: 'panel'
        });

        driving.search([
          { keyword: senderAddress, city: senderCityName },
          { keyword: receiverAddress, city: receiverCityName }

        ], function(status, result) {
          if (status === 'complete') {
            console.log('绘制驾车路线完成');
          } else {
            console.error('获取驾车数据失败：' + result);
          }
        });
      });
    },
    remoteLoad(url, callback) {
      const script = document.createElement('script');
      script.type = 'text/javascript';
      script.src = url;

      if (script.readyState) {  // For IE
        script.onreadystatechange = function() {
          if (script.readyState === 'loaded' || script.readyState === 'complete') {
            script.onreadystatechange = null;
            callback();
          }
        };
      } else {  // For other browsers
        script.onload = function() {
          callback();
        };
      }

      document.body.appendChild(script);
    },
    //查看地图点击事件
    ViewMapClickEvents(){
      // Define the initMap callback function before loading JsApi
      window.initMap = () => {
        this.initMap(); // Call the initMap method when JsApi is loaded
      };

      // Call the remoteLoad function here
      this.remoteLoad('https://webapi.amap.com/maps?v=1.4.15&key=0c069d624168ea56415191392161489c&callback=initMap', () => {
        // Callback function after script is loaded
        console.log('高德地图API加载完成');
      });
      this.dialogVisible = true;
    },
    handleClose() {//关闭查看地图方法
      this.dialogVisible = false; // 关闭对话框

      /*      this.$confirm('确认关闭？')
                .then(() => {
                  // 在这里执行关闭对话框的操作
                })
                .catch(() => {
                  // 用户取消关闭操作时的处理
                });*/
    },

    //转换运单状态
    ConvertWaybillStatus(value) {
      switch (value) {
        case 1:
          return '新建';
        case 2:
          return '已装车';
        case 3:
          return '到达';
        case 4:
          return '到达终端网点';
        case 5:
          return '已签收';
        case 6:
          return '拒收';
        default:
          return '其他';
      }
    },
    //转换调度状态
    TransitionSchedulingStatus(value) {
      switch (value) {
        case 1:
          return '待调度';
        case 2:
          return '未匹配路线';
        case 3:
          return '已调度';
        default:
          return '其他';
      }
    },

    //最大页数监听事件
    handleSizeChange(val) {
      this.pageSize = val
      console.log(`每页 ${val} 条`);
    },
    //当前页监听事件
    handleCurrentChange(val) {
      this.currentPage = val
      console.log(`当前页: ${val}`);
    },
    //搜索点击事件
    ConditionalSearch(){
      QueryAllWaybillDataWithConditions(this.TransportDto).then(response =>{
        this.TransportList = response;
      })
    },
    handleChange(val) {
      console.log("折叠板========"+val);
    },
    //隐藏订单详情显示订单列表
    hideDiv() {
      this.TransportDetailsVisible = false;
      this.TransportListVisible = true;
    },
    //显示订单详情隐藏订单列表并查询订单详情
    async handleDetailClick(id) {
      console.log("点击了查看详情按钮，当前行的id为：" + id);

      //根据订单id查订单详情
      ObtainWaybillDetailsBasedOnId(id).then(response =>{
        this.TransportVo = response
        this.CargoList = response.orderVo.orderCargo
        console.log("查到的运单信息====" + response.id);
        console.log(this.TransportVo);
      })


      this.TransportListVisible = false;
      this.TransportDetailsVisible = true;
    },
    //查询发件人城市
    async handleSenderProvinceChange(value) {

      if (!value) {
        this.TransportDto.senderCityId = '';
        this.TransportDto.senderDistrictId = '';
        this.senderdistricts=[];
        console.log("发件人城市id====" + value);

      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.sendercities = response
      })
    },
    //查询发件人区县
    async handleSenderCityChange(value) {
      if (!value) {
        this.TransportDto.senderDistrictId = '';
        this.senderdistricts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.senderdistricts = response
      })
    },
    //查询收件人城市
    async handleReceiverProvinceChange(value) {
      if (!value) {
        this.TransportDto.receiverCityId = '';
        this.TransportDto.receiverDistrictId = '';
        this.receiverdistricts=[];
      }
      //调用根据省份id查城市
      handleProvinceChange(value).then(response =>{
        this.receivercities = response
        console.log("收件人城市====" + response);
      })
    },
    //查询收件人区县
    async handleReceiverCityChange(value) {
      if (!value) {
        this.TransportDto.receiverDistrictId = '';
        this.receiverdistricts=[];
      }
      //调用根据城市id查区县
      handleCityChange(value).then(response =>{
        this.receiverdistricts = response
        console.log("收件人区县====" + response);
      })
    }
  },


  async created() {

    //查询所有省份
    handleAllProvinces().then(response =>{
      this.senderprovinces=response
      this.receiverprovinces=response
    })

    //查询所有运单信息
    QueryAllWaybillDataWithConditions(this.TransportDto).then(response =>{
      this.TransportList=response
      console.log(response);
    })

  }

};
</script>

<style>
.custom-title {
  font-weight: bold;
  font-size: 16px;
}
</style>


<style scoped>
#container {
  height: 600px; /* 设置地图容器的高度 */
  width: 100%; /* 设置地图容器的宽度 */
}

#panel {
  position: fixed;
  background-color: white;
  max-height: 90%;
  overflow-y: auto;
  top: 140px;
  right: 10px;
  width: 280px;
  height: 600px;

}

#panel .amap-call {
  background-color: #009cf9;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
}

#panel .amap-lib-driving {
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  overflow: hidden;
}
</style>

